<template>
    <div id='icloud-index'>
        <h1 class="card-title">
           <!--  <p><span>iCloud账号管理</span></p> -->
            <div class="card-title__button-box">
                <div class="form-item__value">
                    <select-group v-model='statusSelect'>
                        <select-option value='' text='所有'></select-option>
                        <select-option value='FREE' text='空闲'></select-option>
                        <select-option value='USING' text='已锁定'></select-option>
                        <select-option value='USED' text='已绑定'></select-option>
                        <select-option value='LOCKED' text='已禁用'></select-option>
                    </select-group>
                </div>
                <div class="form-item__value">
                    <input type="text" placeholder="请输入AppleId" v-model='appleId'>
                </div>
                <div class="card-title__button" @click='getList(1)'>确定</div>
                <button-loading :loading='loading_upload'><upload type='xls' @done='upload'>上传表格</upload></button-loading>
            </div>
        </h1>
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>iCloud账号</th>
                        <th>注册时间</th>
                        <th>状态</th>
                        <th>已使用次数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>{{ item.appleId || placeholder }}</td>
                        <td>{{ item.createTime || placeholder }}</td>
                        <td>{{ item.statusStr || placeholder }}</td>
                        <td>{{ item.loginStatusStr || placeholder }}</td>
                        <td>
                            <div class='option-box'>
                                <span class='option-button' v-if='item.status == "LOCKED"' @click='showUnLock(item.id)'>解锁</span>
                                <span class='option-button' v-if='item.status == "FREE"' @click='showLock(item.id)'>锁定</span>
                                <span class='option-button' @click='goDetail(item.id)'>查看详情</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination 
                :current-page='listInfo.pageNum'
                :total-page='listInfo.totalPage'
                @pageChange='getList'></pagination>
                 <el-pagination class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"  layout="total,  prev, pager, next, jumper" 
                 :total="listInfo.totalCount" :background="true">
                </el-pagination>
        </div>


        <confirm
            :show='show_confirm_lock'
            title='确认锁定iCloud账户'
            :loading='loading_lock'
            @close='show_confirm_lock=false'
            @confirm='lock'>
        </confirm>

        <confirm
            :show='show_confirm_unLock'
            title='确认解锁iCloud账户'
            :loading='loading_unLock'
            @close='show_confirm_unLock=false'
            @confirm='unLock'>
        </confirm>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import upload from '../components/Upload.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { icloudApi, systemApi, allApi, youxinApi } from '../api/api'
    import { systemUserValidation } from '../validation/validation'
    import { rules } from '../utils/utils'
    import moment from 'moment'


    export default {
        components:{
            selectGroup,
            selectOption,
            echarts,
            upload,
            loading,
            modal,
            tab,
            tabBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                roleListManager:[],
                roleListOperator:[],
                show_modal_user:false,
                show_confirm_lock:false,
                show_confirm_reset:false,
                show_confirm_unLock:false,
                chartData:'',
                curItem:{
                    accName:'',
                    name:'',
                    phone:'',
                    email:'',
                    roleType:{
                        value:'',
                        text:'请选择角色类型'
                    },
                    permission:[]
                },
                data:'',
                name:'',
                accName:'',
                phone:'',
                curId:'',
                email:'',
                myChart:'',
                chartOptions:'',
                placeholder:'--',
                loading_upload:false,
                loading_chart:false,
                loading_reset:false,
                loading_lock:false,
                loading_unLock:false,
                loading_roleList:false,
                loading_save:false,
                show_reportDetail:false,
                recommend:0,
                modalTitle:'',
                roleType:{
                    value:'',
                    text:'请选择角色类型'
                },
                statusSelect:{
                    value:'',
                    text:'所有'
                },
                permission:[],
                permissionSelect:{
                    value:'',
                    text:'请选择绑定状态'
                },
                allRoles:[],
                trend:[],
                curDetail:{},
                curId:'',
                appleId:'',
                list:[],
                listInfo:{},
                records:[],
                date:'',
                dateFrom:'',
                dateTo:'',
                mobile:'',
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            handleCurrentChange(val){
                //console.log(`当前页: ${val}`);
                this.getList(val)
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            goDetail(id){
                this.$router.push({
                    name:'icloud-detail',
                    params:{
                        id:id
                    }
                })
            },
            clearCurPermission(){
                this.curItem.permission.splice(0)
            },
            getPermissionArr(){
                let text = ''
                if(this.curItem.permission){
                    _.each(this.curItem.permission,(value,index)=>{
                        if(text == ''){
                            text = `${value.value}`
                            console.log(`${value.value}`)
                            return
                        } 
                        text = `${text},${value.value}`
                        console.log(`${text},${value.value}`)
                    })
                }
                console.log(text)
                return text
            },
            resetCurItem(){
                this.curItem = {
                    accName:'',
                    name:'',
                    phone:'',
                    email:'',
                    roleType:{
                        value:'',
                        text:'请选择角色类型'
                    },
                    permission:[]
                }
            },
            showNewUser(){
                this.resetCurItem()
                this.show_modal_user = true
            },
            showEditUser(item){
                this.curItem = _.cloneDeep(item)
                this.curItem.permission = []
                _.each(this.curItem.roles,(value,index)=>{
                    this.curItem.permission.push({
                        value:value.roleCode,
                        text:value.roleName,
                    })
                })
                this.curItem.roleType={
                    value:this.curItem.roleType,
                    text:this.curItem.roleTypeStr,
                }
                // this.getRoleList()
                this.show_modal_user = true
            },
            showResetConfirm(item){
                this.show_confirm_reset = true
                this.curId = item.id
            },
            showModalDetail(item,title){
                let name 
                if(item){
                    name = item.appName
                }
                this.modalTitle = title
                this.getTrend(name)
                this.loading_chart - true
                this.show_reportDetail = true
            },
            saveUser(){
                let permissionArr = this.getPermissionArr()
                let params = {
                    id:this.curItem.id,
                    accName:this.curItem.accName,
                    name:this.curItem.name,
                    phone:this.curItem.phone,
                    email:this.curItem.email,
                    roleType:this.curItem.roleType.value,
                    roleCode:permissionArr,
                }
                if(!systemUserValidation(params)) return
                this.loading_save = true
                systemApi.saveOperator(params)
                .then(result=>{
                    this.loading_save = false
                    this.show_modal_user = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save = false
                })
            },
            showLock(id){
                this.show_confirm_lock = true
                this.curId = id
            },
            showUnLock(id){
                this.show_confirm_unLock = true
                this.curId = id
            },
            lock(){
                this.loading_lock = true
                icloudApi.lockAccount({
                    id:this.curId
                })
                .then(result=>{
                    this.loading_lock = false
                    this.show_confirm_lock = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_lock = false
                })
            },
            unLock(){
                this.loading_unLock = true
                icloudApi.unlockAccount({
                    id:this.curId
                })
                .then(result=>{
                    this.loading_unLock = false
                    this.show_confirm_unLock = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_unLock = false
                })
            },
            reGetList(){
                this.getList(1)
            },
            getList(num){
                this.loading = true
                icloudApi.list({
                    pageSize:10,
                    pageIndex:num,
                    status:this.statusSelect.value,
                    appleId:this.appleId
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getRoleList(type){
                this.loading_roleList = true
                systemApi.roleList({
                    roleType:type
                })
                .then(result=>{
                    this.loading_roleList = false
                    if(type == 'manager'){ this.roleListManager = result }
                    if(type == 'operator'){ this.roleListOperator = result }
                })
                .catch(error => {
                    this.loading_roleList = false
                    console.error(error)
                })
            },
            getAllRoles(){
                systemApi.allRoles()
                .then(result=>{
                    this.allRoles = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            upload(fileData){
                console.log(fileData)
                this.loading_upload = true
                icloudApi.uploadExcel(fileData)
                .then(result=>{
                    this.loading_upload = false
                    this.getList(1)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_upload = false
                })
            },
            resetPwd(appName){
                this.loading_reset = true
                systemApi.resetOperatorPwd({
                    id:this.curId
                })   
                .then(result=>{
                    this.loading_reset = false
                    this.show_confirm_reset = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_reset = false
                })
            },
            setDays(index){
                let days
                if(index === 0) days = 7
                else if(index === 1) days = 30
                else if(index === 2) days = 60

                this.chartOptions.dataZoom = [{
                    startValue: moment().subtract(days, 'days').format('YYYY-MM-DD')
                }, {
                    type: 'inside'
                }]
            },
        },
        created(){
            this.getList(1)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #icloud-index{
        
    }
</style>
